<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型渐变阴影</title>
    <style>
        body {
            display: flex;
            /* 将body设置成Flexbox容器，方便居中子元素 */
            /* display: flex 把容器变成弹性盒子，子元素可以通过 justify-content 和 align-items 轻松居中。 */
            justify-content: center;
            align-items: center;
            /* 实现水平和垂直居中 */
            height: 100vh;
            /* 使得页面高度填充整个视口高度 */
            margin: 0;
            /* 去除页面外边距，避免页面留白 */
            background-color: #fffffff1;
            /* 设置页面背景颜色 */
        }

        .circle-shadow {
            width: 200px;
            /* 圆形的直径 */
            height: 200px;
            border-radius: 50%;
            /* 将盒子变成圆形 */
            background: linear-gradient(135deg, #000 20%, #fff 75%);
            /* 135度方向，黑色到白色渐变 */
            /* background: linear-gradient(方向, 颜色1 位置1, 颜色2 位置2, ...); */

            /* background: radial-gradient(circle, #fff 20%, #000 100%); */
            /* 阴影模拟渐变效果 */
            /* 为元素添加外部阴影多个阴影可以叠加 */
            box-shadow:
                0 0 10px 5px rgba(0, 0, 0, 0.3),
                /* 0 0 表示无偏移 10px表示模糊半径  5px表示扩散半径   raba(0, 0, 0.3)表示颜色为黑色 透明的为0.3 */
                0 0 20px 15px rgba(0, 0, 0, 0.2),
                0 0 40px 30px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>

<body>
    <div class="circle-shadow"></div>
</body>

</html>